<template>
	<view class="page flex-col">
		<view class="block_1 flex-col">
			<view class="group_1 flex-col">
				<!-- 轮播图 -->
				<div class="banner">
					<div class="uview-banner">
						<!-- <u-swiper :list="list.picture" keyName="banner_image" width="100%" height="333rpx"></u-swiper> -->
						<image style="width: 100%;height: 333rpx;" :src="list.picture" mode=""></image>
					</div>
				</div>
				<!-- <u-swiper :list="banner" keyName="banner_image"  margin= '95rpx 0 0 145rpx' width="463rpx"  height="333rpx"></u-swiper> -->

			</view>
			<view class="group_2 flex-col">
				<text class="text_4">{{list.name?list.name:''}}</text>
				<!-- <text class="paragraph_1">
					{{list.sub_title}}
				</text> -->
				<view class="text_4q" v-if="item.inventory == 0">
					预约
				</view>
				<view class="group_3 flex-row justify-between">
					<view class="text-wrapper_2">
						<text class="text_5">{{list.need_points?list.need_points:0}}</text>
						<text class="text_6">积分</text>
						<!-- <text class="text_56">¥{{list.price}}</text> -->
					</view>
					<!-- <text class="text_7">{{list.exchange_but_no_get}}人兑换过</text> -->
					<view class="text_7" v-if="list.volume > list.sale_num">已售{{list.volume?list.volume:0}}张</view>
					<view class="text_7" v-if="list.volume < list.sale_num">已售{{list.sale_num?list.sale_num:0}}张</view>
					<!-- <text class="text_7">仅剩{{list.else_stock}}件</text> -->

				</view>
				<view class="group_4 flex-col"></view>
				<div class="tabs_1 flex-col justify-between">
					<u-tabs :list="tabsList" lineColor="#4BA677" :activeStyle="{
								  color: '#4BA677 ',fontWeight: 'bold',}" :inactiveStyle="{ color: '#666666',}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :lineWidth="30"
						:current="currentTab" @click="onClickTab" />
				</div>
				<!-- <text class="text_10">富文本内容</text> -->
				<view style="padding: 30rpx;">
					<u-parse :content="list.buy_content"></u-parse>
				</view>
			</view>
			<view class="" style="width: 100; height: 143rpx;">

			</view>
			<view class="group_6 flex-col" v-if="jifen >= list.need_points">
				<view class="group_7 flex-row justify-between"
					v-if="time_start >= start_time && time_start <= end_time">
					<view class="text-wrapper_5">
						<text class="text_12">我的积分:</text>
						<text class="text_13"></text>
						<text class="text_14">{{jifen?jifen:''}}</text>
					</view>
					<view class="button_1 flex-col" @click="onClick_1">
						<text class="text_15">立即兑换</text>
					</view>
				</view>
			</view>
			<view class="group_6 flex-col" v-else>
				<view class="group_7 flex-row justify-between">
					<view class="text-wrapper_5">
						<text class="text_12">我的积分:</text>
						<text class="text_13"></text>
						<text class="text_14">{{jifen?jifen:''}}</text>
					</view>
					<view class="button_11 flex-col" @click="onClick_3">
						<text class="text_15">立即兑换</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const index = require('@/api/personal/index.js')
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				banner: [],
				constants: {},
				tabsList: [{
						name: "用户须知"
					},
					// {
					// 	name: "兑换地点"
					// }
				],
				currentTab: 0,
				orderStatus: '',
				jifen: '',
				list: {
					name: '',
					address: {
						name: ''
					},
					need_points: 0,
					price: 0,
					exchange_but_no_get: 0,
					detail: '',
				},
				end_time: '',
				start_time: '',
				time_start: '',
				id: '',
				venues_id: '',
				isProcessing: false // 锁定标志
			};
		},
		onLoad(options) {
			this.id = options.id
			this.venues_id = options.venues_id
			// this.getShopTicket()
			// this.getPoints()
		},
		onShow() {
			this.getShopTicket()
			this.getPoints()
		},

		methods: {
			onClick_3() {
				uni.showToast({
					title: '无法兑换',
					icon: 'none',
					duration: 850
				});
			},
			async getShopTicket() {
				let postData = {
					ticket_id: this.id,
					project_id: getApp().globalData.projectId,
					appid: this.$https.weixinAppId,
					goods_type: "ticket",
				};
				let res = await venues.getTicketDetail(postData);
				if (res.code == 1) {
					this.list = res.data;
				}
			},
			async getPoints() {
				let params = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync('openid'),
				};
				let res = await index.getPoints(params);
				if (res.code === 1) {
					this.jifen = res.data.result
				}
			},

			async onClick_1() {
				let that = this
				// 如果当前有正在处理的操作，则返回
				if (this.isProcessing) return;

				// 设置锁定标志
				this.isProcessing = true;
				try {
					uni.showModal({
						title: '提示',
						// 提示文字
						content: '是否确认兑换？',
						// 取消按钮的文字自定义
						cancelText: "取消",
						// 确认按钮的文字自定义
						confirmText: "确认",
						//删除字体的颜色
						confirmColor: '#000000',
						//取消字体的颜色
						cancelColor: '#999',
						success: function(res) {
							if (res.confirm) {
								// 执行确认后的操作
								let params = {
									app_id: that.$https.weixinAppId,
									project_id: getApp().globalData.projectId,
									open_id: uni.getStorageSync('openid'),
									goods_id: that.list.id,
									venue_id: that.venues_id
								};
								// let res = await index.CreateExchangeOrder(params);
								index.exchangeOrder(params).then(result => {
									if (result.code == 1) {
										uni.showToast({
											title: '兑换成功',
											icon: 'none',
											duration: 850
										});
										setTimeout(() => {
											uni.reLaunch({
												url: '/pages_other/ticket-holder/ticket-holder'
											})
										}, 1000)

									} else {
										uni.showToast({
											title: result.info,
											icon: 'none',
											duration: 850
										});
									}

								})
								// if (res.code === 1) {
								// 	uni.navigateTo({
								// 		url: './exchange_record'
								// 	})
								// }

							} else {
								// 执行取消后的操作
								// setTimeout(() => {
								// 	// uni.reLaunch({
								// 	// 	url: '/pages/personal/personal'
								// 	// })
								// 	// uni.navigateTo({
								// 	// 	url:"/page_venues/pages/venuesDetail/pay/payError"
								// 	// })
								// 	uni.navigateTo({
								// 		url: '/pages/personal/orders/orders?tab=1'
								// 	})
								// }, 500)
							}
						}
					})
				} catch (error) {
					console.error('操作失败:', error);
				} finally {
					// 解除锁定标志
					this.isProcessing = false;
				}
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				// this.loopData1 = [];
				// this.loopData0 = [];

				// 	if (this.currentTab === 1) {
				// 		this.orderStatus = '1'

				// 	} else {
				// 		this.orderStatus = '0'
				// 	}
				// this.getOrdersList();
			},
		}
	};
</script>
<style lang='scss'>
	@import '../../static/css/common/common.scss';

	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;

		.block_1 {
			width: 750rpx;
			height: 100%;
			background: url('https://oss.szsportscenter.cn/img/d4a34025c33509d16f12dd1f68a683dcd3a2cacf.png') 100% no-repeat;
			background-size: 100% 100%;

			.group_1 {
				background-color: rgba(255, 255, 255, 1.0);
				width: 750rpx;
				height: 350rpx;

				.banner {
					position: relative;
					display: flex;
					justify-content: center;
				}

				.uview-banner {
					width: 100%;
					position: absolute;
					z-index: 1;
					/* width: 463rpx; */
					height: 350rpx;
					/* margin: 60rpx 0 0 0; */
					/* top: 10rpx; */
				}

				/* 	.banner::after {
					content: '';
					width: 100%;
					height: 260rpx;
					position: absolute;
					border-radius: 0 0 100% 100%;
					background:  linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
					box-shadow: 0px 0px 10px 10px rgba(182, 174, 174, 0.75);
					-webkit-box-shadow: 0px 0px 10px 10px rgba(182, 174, 174, 0.75);
					-moz-box-shadow: 0px 0px 10px 10px rgba(182, 174, 174, 0.75);
				} */

			}

			.group_2 {
				width: 750rpx;
				/* height: 440rpx; */
				height: 100%;

				.text_4 {
					width: 90%;
					height: 40rpx;
					color: rgba(51, 51, 51, 1);
					font-size: 36rpx;
					font-weight: 700;
					text-align: left;
					line-height: 36rpx;
					margin: 20rpx 0 0 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.text_4q {
					color: #4BA677;
					font-size: 28rpx;
					font-weight: 600;
					text-align: left;
					margin: 15rpx 0 0 30rpx;
				}

				.paragraph_1 {
					width: 689rpx;
					height: 60rpx;
					overflow-wrap: break-word;
					color: rgba(136, 136, 136, 1);
					font-size: 24rpx;
					font-family: PingFang-SC-Regular;
					font-weight: NaN;
					text-align: left;
					line-height: 36rpx;
					margin: 30rpx 0 0 30rpx;
				}

				.group_3 {
					width: 688rpx;
					height: 40rpx;
					margin: 15rpx 0 0 30rpx;

					.text-wrapper_2 {
						width: 117rpx;
						height: 30rpx;
						overflow-wrap: break-word;
						font-size: 0;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 36rpx;

						.text_5 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							color: rgba(245, 64, 41, 1);
							font-size: 36rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 36rpx;
						}

						.text_6 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							color: rgba(245, 64, 41, 1);
							font-size: 24rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;

						}

						.text_56 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							font-size: 24rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							color: rgba(156, 156, 156, 1.0);
							text-decoration: line-through;
						}
					}

					.text_7 {
						width: 154rpx;
						height: 30rpx;
						overflow-wrap: break-word;
						color: rgba(190, 190, 190, 1);
						font-size: 26rpx;
						font-family: PingFang-SC-Regular;
						text-align: right;
						white-space: nowrap;
						line-height: 34rpx;
						margin-top: 6rpx;
					}
				}

				.group_4 {
					background-color: rgba(243, 243, 243, 1);
					width: 750rpx;
					height: 20rpx;
					margin-top: 20rpx;
				}

				.tabs_1 {
					height: 55rpx;
					width: 302rpx;
					/* margin: 29rpx 0 0 31rpx; */

					.text-wrapper_3 {
						width: 252rpx;
						height: 27rpx;

						.text_8 {
							width: 109rpx;
							height: 27rpx;
							overflow-wrap: break-word;
							color: rgba(1, 109, 255, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 28rpx;
						}

						.text_9 {
							width: 102rpx;
							height: 25rpx;
							overflow-wrap: break-word;
							color: rgba(153, 153, 153, 1);
							font-size: 26rpx;
							font-family: PingFang-SC-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 26rpx;
							margin-top: 2rpx;
						}
					}

					.image-wrapper_1 {
						width: 58rpx;
						height: 8rpx;
						margin: 20rpx 0 0 25rpx;

						.image_3 {
							width: 58rpx;
							height: 8rpx;
						}
					}
				}

				.text_10 {
					width: 128rpx;
					height: 25rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 26rpx;
					margin: 50rpx 0 31rpx 32rpx;
				}
			}

			.group_s {
				height: 2464rpx;
				margin-top: -1rpx;
				width: 750rpx;
			}

			.group_6 {
				width: 750rpx;
				height: 170rpx;
				position: fixed;
				bottom: 0;
				background-color: #FFFFFF;

				.group_7 {
					width: 689rpx;
					height: 80rpx;
					margin: 30rpx 0 0 30rpx;

					.text-wrapper_5 {
						width: 178rpx;
						height: 26rpx;
						overflow-wrap: break-word;
						font-size: 0;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 28rpx;
						margin-top: 27rpx;

						.text_12 {
							width: 178rpx;
							height: 26rpx;
							overflow-wrap: break-word;
							color: rgba(190, 190, 190, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 28rpx;
						}

						.text_13 {
							width: 178rpx;
							height: 26rpx;
							overflow-wrap: break-word;
							color: rgba(190, 190, 190, 1);
							font-size: 26rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 26rpx;
						}

						.text_14 {
							width: 178rpx;
							height: 26rpx;
							overflow-wrap: break-word;
							color: rgba(75, 166, 119, 1);
							font-size: 30rpx;
							font-family: DIN-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 30rpx;
						}
					}

					.button_1 {
						background-color: rgba(75, 166, 119, 1);
						border-radius: 40px;
						height: 80rpx;
						width: 318rpx;

						.text_15 {
							width: 121rpx;
							height: 29rpx;
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1.0);
							font-size: 30rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 34rpx;
							margin: 26rpx 0 0 98rpx;
						}
					}

					.button_11 {
						background-color: #EFEFEF;
						border-radius: 40px;
						height: 80rpx;
						width: 318rpx;

						.text_15 {
							width: 121rpx;
							height: 29rpx;
							overflow-wrap: break-word;
							color: #999999;
							font-size: 30rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 34rpx;
							margin: 26rpx 0 0 98rpx;
						}
					}
				}
			}
		}
	}
</style>